<template>
  <div class="permission">
    <div class="operate">
      <div style="flex: 0 0 auto">
        <ep-search
            :size="size"
            v-model="queryParam.d0702"
            placeholder="请输入任务名称"
            enter-button="chaxun "
            @search="() =>{this.findList()}"
        ></ep-search>
        <ep-button :size="size" style="margin-left: 15px" icon="refresh.svg" @click="clearBtn"></ep-button>
        <a-tree-select
            :size="size"
            placeholder="请选择任务范围(可多选)"
            ref="taskArea"
            allowClear
            tree-checkable
            style="margin-left: 15px;width:22vw"
            v-model="queryParam.manageAreas"
            :show-checked-strategy="SHOW_PARENT"
            :treeData="taskAreaTree"
            @change="manageAreaChange()"
        />
      </div>
    <ep-button :size="size" style="margin-left: 15px" icon="export.svg" @click="() =>{this.outExcel()}">导出</ep-button>
      <div>
        <span class="title-size1" >全市/全区进度： </span>
        <ep-progress
            style="margin-left: 15px"
            width="200px"
            :percent=this.wholeProgress
        />
      </div>
    </div>
    <a-modal
        :title="modalTitle"
        centered
        style=""
        width="90%"
        destroyOnClose
        :mask-closable="false"
        :visible="visible"
        @cancel="handleCancel"
    >
      <patrol-child-task-list
          ref="patrolChildTaskList"
          @handleCancel="handleCancel"
          @showOrHide="showOrHide">
      </patrol-child-task-list>
      <template slot="footer">
        <ep-button @click="handleCancel">关闭</ep-button>
      </template>
    </a-modal>
    <a-modal
        :title="modalTitle"
        centered
        style=""
        width="90%"
        destroyOnClose
        :mask-closable="false"
        :visible="visiblezx"
        @cancel="handleCancelzx"
    >
      <zx-child-task-list
          ref="zxChildTaskList"
          @handleCancel="handleCancelzx"
          @showOrHide="showOrHidezx">
      </zx-child-task-list>
      <template slot="footer">
        <ep-button @click="handleCancelzx">关闭</ep-button>
      </template>
    </a-modal>

    <div class="ep-table">
      <zh-table height="auto"  ref="tableList"  row-id="roleId" style="width: 100%"  type="paging"
                :url="tableUrl" :columns="tableColumn" >
        <template #filter="{ $panel, column }">
          <input
              type="type"
              v-for="(option, index) in column.filters"
              :key="index"
              v-model="option.data"
              @input="$panel.changeOption($event, true, option)"
          />
        </template>
        <template #operate="{ row }">
          <div class="alert-message">
            <i class="fa fa-exclamation-circle alert-message-icon"></i>
            <span class="alert-message-content">
              <ep-button size="small" type="rank" @click="audit(row)"
              >审核</ep-button
              >
            </span>
          </div>
        </template>
      </zh-table>
    </div>
  </div>
</template>
<script>
import {
  getBatchDict,
} from "@/services/system/api"
import {
  getPatrolFinishCaseList,getPermissionParams,patrolAllProgress
} from "@/services/system/whdngxlApi"
import moment from 'moment'
import ZhTable from "@/components/zh-table/ZhTable";
import {TreeSelect} from "ant-design-vue";
import {mapGetters} from "vuex";
import UnmovableRelics from "@/pages/whdngxl/TasksCheckManage/UnmovableRelics";
import PatrolChildTaskList from "@/pages/system/form/PatrolChildTaskList";
import ZxChildTaskList from "@/pages/system/form/ZxChildTaskList";

const SHOW_PARENT = TreeSelect.SHOW_PARENT;
export default {
  name: 'PatrolFinishCase',
  components: {
    PatrolChildTaskList,
    ZxChildTaskList,
    ZhTable
  },
  computed: {
    ...mapGetters(['size']),
  },
  data() {
    return {
      dictData: {},
      filtersData:{},
      queryParam: {
        d0702:'',
        manageAreas: undefined,
      },
      taskAreaTree: [],
      SHOW_PARENT,
      tableColumn: [
        {field: 'd0401', title: '总任务ID' ,visible: false, align: 'center',},
        {field: 'd0706', title: '任务类型' ,visible: false, align: 'center',},
        {field: 'd0702', title: '任务名称', visible: true, align: 'center',},
        {field: 'c0303Name', title: '任务表' ,filters:[],visible: true, align: 'center',},
        {field: 'tasksArea', title: '任务范围',  visible: true, align: 'center',},
        {field: 'finishedTotal', title: '已巡查数', visible: true,sortable:true, align: 'center',},
        {field: 'unfinishedTotal', title: '未巡查数', visible: true,sortable:true, align: 'center',},
        {field: 'tasksPlan', title: '巡查进度', visible: true, align: 'center',},
        {
          field: "operate",
          title: "操作",
          fixed: "right",
          align: "center",
          slots: {
            // 使用插槽模板渲染
            default: "operate",
          },
          visible: true,
        },
      ],
      tableData: [],
      tableUrl: getPatrolFinishCaseList,
      toolbarConfig: {
        custom: true,
        slots: {}
      },
      wholeProgress:0,
      visible:false,
      visiblezx:false,
      modalTitle:'',
    }
  },
  created() {
    //获取任务范围
    this.$http.post(getPermissionParams, {}).then((res) => {
      const data = res.result;
      this.taskAreaTree = data.orgTreeData;
    });
    // 数据字典初始化
    this.$nextTick(() => {
      this.init()
    })
  },
  mounted() {
    this.findList()
  },
  methods: {
    moment,
    manageAreaChange() {
      this.findList();
    },
    init(){
       const params = {}
       params.dictFields = 'c0303'
       this.$http.post(getBatchDict, params).then(res => {
         this.dictData = res.result
         //获取筛选数据
         UnmovableRelics.methods.getFiltersData(this, "tableList");
       })
       //获取全市/全区进度
      setTimeout(() => {
        this.$http.post(patrolAllProgress,{}).then((res) => {
          if (res.result) {
            this.wholeProgress = Number(res.result)
          }
        }).catch((error) => {
        })
      }, 50)
    },
    clearBtn(){
      this.queryParam.d0702 = ''
      this.findList()
    },
    findList() {
      this.$refs.tableList.query(this.queryParam)
    },
    outExcel(){
      this.$refs.tableList.exportData("巡查完成情况",'csv');
    },
    handleCancel() {
      this.visible = false;
      console.log("@@",this.visible)
    },
    showOrHide() {
      this.visible = !this.visible;
    },
    handleCancelzx() {
      this.visiblezx = false;
    },
    showOrHidezx() {
      this.visiblezx = !this.visiblezx;
    },
    audit(row){

      this.modalTitle = '任务名称：'+row.d0702
      debugger
      if(row.d0706==='1'){
        this.showOrHide()
        this.$nextTick(() => {
          this.$refs.patrolChildTaskList.initData(row);
        });
      }else{
        this.showOrHidezx()
          this.$nextTick(() => {
            this.$refs.zxChildTaskList.initData(row);
          });
      }

    }
  },
  watch: {
  }
}
</script>

<style lang="less" scoped>
.permission {
  //padding: 15px 20px 0;
  height: 100%;

  .desc,
  .operate {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;

    > div {
      flex: 0 0 auto;
      display: flex;
      align-items: center;
    }


  }

  .desc {
    margin-bottom: 20px;
  }

  .operate {
    margin-bottom: 15px;
    .field {
      flex: 0 0 auto;
      position: relative;
      margin-left: 15px;
      .field-box {
        position: absolute;
        top: 40px;
        left: 0;
        right: -40px;
        z-index: 99;
        border: 1px solid #2175a9;
        background: #002a44;
        border-radius: 5px;
        ul {
          padding: 10px;
          li {
            padding: 1px 0;
          }
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 5px;
          border-top: 1px solid #2175a9;
          color: #fff;
          p {
            flex: 1;
            text-align: center;
            cursor: pointer;
            &:hover {
              color: #49bbeb;
            }
          }
        }
      }
    }
  }
  .ep-table {
    height: calc(100% - 60px);
  }
}
.title-size1 {
  height: 24px;
  line-height: 24px;
  font-size: 16px;
  color: rgb(36, 102, 208);
  font-weight: 600;
}
</style>
